<template>
  <div id="resource">
    <TopBar :searchOrNot="false"></TopBar>
    <h3>资源分享页介绍</h3>
    <p id="introduction">本页主要进行一些资源的分享，我会将我认为对我代码生涯有帮助的资源分享于此，希望它们也能帮助到大家</p>
    <template v-if="show">
      <div v-for="(value, key) in resourceData" :key="key">
        <h3 @click="resourceTypeShowListChange(key)">{{ key }}
          <span :class="resourceTypeShowList[key] ? 'down' : ''" class="sign">&#8250;</span>
        </h3>
        <el-collapse-transition>
          <div v-show="resourceTypeShowList[key]" class="resourceBar">
            <p v-for="item in value" :key="item.id"><a :href="item.url" target="_blank">{{ item.url
            }}</a>&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;{{ item.text }}</p>
          </div>
        </el-collapse-transition>
      </div>
    </template>
    <NotMore></NotMore>
    <FilingBar></FilingBar>
  </div>
</template>
<script>
import FilingBar from '@/components/reusable/FilingBar.vue';
import NotMore from '@/components/reusable/NotMore.vue';
import TopBar from '@/components/reusable/TopBar.vue'
export default {
  data() {
    return {
      resourceData: {},
      resourceTypeShowList: {},
      show: false, // 控制数据渲染，等axios数据到了再渲染
    }
  },
  components: {
    TopBar , NotMore , FilingBar
  },
  methods: {
    // 获取资源数据
    getResourceData() {
      // 请求网站资源
      this.$axios({
        method: 'post',
        url: '/webResource/getAllResource'
      }).then(res => {
        res.data.forEach(element => {
          if (!Reflect.has(this.resourceData, element.type)) { // 若没有该类型的属性，创造数组
            this.resourceData[element.type] = []
          }
          this.resourceData[element.type].push(element) // 添加元素
        });
        this.show = true // 更改渲染状态量，渲染数据
        // 获取资源类型是否展开状态量
        Object.keys(this.resourceData).forEach(e => {
          this.resourceTypeShowList[e] = false
        })
      })
    },
    // 展开事件
    resourceTypeShowListChange(key) {
      this.resourceTypeShowList[key] = !this.resourceTypeShowList[key]
      this.resourceTypeShowList = Object.assign({}, this.resourceTypeShowList) // 为了让vue察觉到对象的变化，重新给resourceTypeShowList赋一个对象
    }
  },
  mounted() {
    this.getResourceData()
  }
}
</script>
<style lang="scss" scoped>
p,
h3 {
  margin: 30px 60px;
}

a {
  color: $color-main-text;
  transition: all .2s;
}
a:hover {
  color: #fa5566
}

h3 {
  background-color: $color-background-assistant;
  padding: 10px;
  color: $color-main-text;
  border-left: solid rgba(0, 0, 0, 0.7) 20px;
  position: relative;
  cursor: pointer;
}

.resourceBar {
  padding-left: 40px;
}

.sign {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  transition: all .5s;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 10px;
  font-size: $font-size-medium;
}

.down {
  // transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -moz-transform: rotate(90deg);
  /* Firefox */
  -webkit-transform: rotate(90deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  /* Opera */
}

#introduction {
  font-size: $font-size-small;
  font-weight: $font-weight-medium;
  text-align: center;
}
</style>
